<template>
  <a-layout-sider width="200">
    <div class="logo">
      <span style="font-size:20px;color:#fff">
        ANT DESDIGN
      </span>
    </div>
    <a-menu
      mode="inline"
      :defaultSelectedKeys="['UserListPage']"
      :defaultOpenKeys="['UserManager']"
      :style="{ height: '91vh', borderRight: 0 }"
      theme="dark"
    >
      <a-sub-menu  v-for="item in SidebarMenu" :key="item.id">
         <template #title>
          <span>
            <span> {{item.name}} </span>
          </span>
        </template>
        <a-menu-item v-for="subitem in item.sub" :key="subitem.componentName" >
          <router-link :to="subitem.path+''">{{subitem.name}}</router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>
<script>
import SidebarMenu from './SidebarMenuConfig.js'
export default {
    name:'Sidebar',
    data(){
        return {
            SidebarMenu:SidebarMenu
        }
    }
}
</script>

<style scoped>
.logo {
  height: 32px;
  /* background: rgba(255,255,255,.2); */
  margin: 16px;
}

</style>